import { useState } from 'react'
import CustomTable from './componets/dataTable'
import './App.css'
import Echarts from './componets/echarts'
import { message,Menu,Row,Col,InputNumber , Card, Form,Button,Space} from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 6,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 14,
    },
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = [
  getItem('Navigation One', 'sub1', <MailOutlined />, [
    getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
    getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
  ]),
  getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
    getItem('Option 5', '5'),
    getItem('Option 6', '6'),
    getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
  ]),
  {
    type: 'divider',
  },
  getItem('Navigation Three', 'sub4', <SettingOutlined />, [
    getItem('Option 9', '9'),
    getItem('Option 10', '10'),
    getItem('Option 11', '11'),
    getItem('Option 12', '12'),
  ]),
  getItem('Group', 'grp', null, [getItem('Option 13', '13'), getItem('Option 14', '14')], 'group'),
];

function App() {
  const [echartsData, setEchartsData] = useState([])

  const [form] = Form.useForm();


  function allZeroValues(obj) {
    for (var key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        if (obj[key] !== 0 && obj[key] !== 0.0) {
          return false;
        }
      }
    }
    return true;
  }
  const onReset = () => {
    form.resetFields();
    setEchartsData([])
  };


  const onFinish = (fieldsValue) => {
    const { FD , ...otherParams} = fieldsValue;
    console.log(fieldsValue,'???fieldsValue')
    console.log(allZeroValues(fieldsValue)); // 输出 true

    if(allZeroValues(fieldsValue)){
      setEchartsData([36.10,39.47,39.51,33.71,42.62,32.37,35.05,66.45,69.99])
    }else if((FD === 0.6)&& allZeroValues(otherParams) ){
      setEchartsData([50.09,26.13,54.62,47.12,54.07,77.19,37.99,46.62,41.03])
    }
    else if(fieldsValue.PR===0.1 &&  fieldsValue.OPS===0.2 &&  fieldsValue.ITOM === 0.1 && fieldsValue.BD ===0.2 && fieldsValue.MD=== 0.1 && FD===0.2 && fieldsValue.GD=== 0.1 && fieldsValue.DT==0.2 && fieldsValue.CS=== 0.1){
      setEchartsData([41.88,34.43,63.56,52.21,68.65,53.68,67.99,56.62,51.03])
    }
   else{
      message.error("选择项值错误")
      setEchartsData([])

    }
  };

  return (
 
      <div>
      <div className='app'>
        <Row>
          <Col>
          <Menu
      // onClick={onClick}
      style={{
        width: 256,
      }}
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      mode="inline"
      items={items}
    />
          </Col>
          <Col className='rightArea'>
        <div className='Table'>
        <CustomTable />
      </div>
      <Row className='formEcharts'>
      <Col span={11}>
      <Card>
      <Form
      form={form}
    {...formItemLayout}
    variant="filled"
    onFinish={onFinish}
    style={{
      maxWidth: 600,
    }}
  >
     <Form.Item
      label="PR"
      name="PR"
      rules={[
        {
          required: true,
          message: 'Please input PR!',
        },
      ]}
    >
      <InputNumber
      placeholder='Please input PR!'
        style={{
          width: '100%',
        }}
        min="0"
        max="100"
        step="0.1"
      />
    </Form.Item>
    <Form.Item
      label="OPS"
      name="OPS"
      rules={[
        {
          required: true,
          message: 'Please input OPS!',
        },
      ]}
    >
      <InputNumber
            placeholder='Please input OPS!'

        style={{
          width: '100%',
        }}
        min="0"
        max="100"
        step="0.1"
      />
    </Form.Item>
    <Form.Item
      label="ITOM"
      name="ITOM"
      rules={[
        {
          required: true,
          message: 'Please input ITOM!',
        },
      ]}
    >
      <InputNumber
                  placeholder='Please input ITOM!'

        style={{
          width: '100%',
        }}
        min="0"
        max="100"
        step="0.1"
      />
    </Form.Item>
    <Form.Item
      label="BD"
      name="BD"
      rules={[
        {
          required: true,
          message: 'Please input BD!',
        },
      ]}
    >
      <InputNumber
        placeholder='Please input BD!'
        style={{
          width: '100%',
        }}
        min="0"
        max="100"
        step="0.1"
      />
    </Form.Item>
    <Form.Item
      label="MD"
      name="MD"
      rules={[
        {
          required: true,
          message: 'Please input MD!',
        },
      ]}
    >
      <InputNumber
      placeholder='Please input MD!'
        style={{
          width: '100%',
        }}
        min="0"
        max="100"
        step="0.1"
      />
    </Form.Item>
    <Form.Item
      label="FD"
      name="FD"
      rules={[
        {
          required: true,
          message: 'Please input FD!',
        },
      ]}
    >
      <InputNumber
            placeholder='Please input FD!'

        style={{
          width: '100%',
        }}
        min="0"
        max="100"
        step="0.1"
      />
    </Form.Item>
    <Form.Item
      label="GD"
      name="GD"
      rules={[
        {
          required: true,
          message: 'Please input GD!',
        },
      ]}
    >
      <InputNumber
            placeholder='Please input GD!'

        style={{
          width: '100%',
        }}
        min="0"
        max="100"
        step="0.1"
      />
    </Form.Item>
    <Form.Item
      label="DT"
      name="DT"
      rules={[
        {
          required: true,
          message: 'Please input DT!',
        },
      ]}
    >
      <InputNumber
            placeholder='Please input DT!'

        style={{
          width: '100%',
        }}
        min="0"
        max="100"
        step="0.1"
      />
    </Form.Item>
    <Form.Item
      label="CS"
      name="CS"
      rules={[
        {
          required: true,
          message: 'Please input CS!',
        },
      ]}
    >
      <InputNumber
            placeholder='Please input CS!'

        style={{
          width: '100%',
        }}
        min="0"
        max="100"
        step="0.1"
      />
    </Form.Item>
    <Form.Item {...tailLayout}>
    <Space>

      <Button type="primary" htmlType="submit">
        Submit
      </Button>
      <Button htmlType="button" onClick={onReset}>
            Reset
          </Button>
          </Space>
    </Form.Item>
    
    </Form>
    </Card>
      </Col>
      <Col span={2}></Col>
      <Col span={11}>
        <Card>
          <div className='echartsStyle'> 
        
        <Echarts 
        data={echartsData}
        xAxData={
          ['PR','OPS','ITOM','BD','MD','FD','GD','DT','CS']
        }/>
        </div>
        </Card>
        </Col>    
    
        </Row>
        </Col>
        </Row>
      </div>
   
      </div>
      

  )
}

export default App
